<template>
    <div>
        <el-form :inline="true" :model="formInline" label-width="80px" class="query-form">
            <el-form-item label="支付通道">
                <el-select v-model="formInline.channel">
                    <el-option label="支付通道" value="-1"></el-option>
                    <el-option :label="c.name + ' 【'+(c.inOut?'进':'出')+ '】'" :value="c.code" v-for="(c,key) in channels"
                               :key="key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border stripe class="mt20">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="account" label="账号" sortable></el-table-column>
            <el-table-column prop="name" label="名称" sortable></el-table-column>
            <el-table-column prop="val.bank" label="简称" sortable></el-table-column>
            <el-table-column prop="val.address" label="开户行地址" sortable></el-table-column>
            <el-table-column prop="val.contact" label="预留手机" sortable></el-table-column>
            <el-table-column prop="channel" label="支付通道" sortable>
                <template scope="scope">{{ handleChannel(scope.row.channel) }}</template>
            </el-table-column>
            <el-table-column prop="enabled" label="状态" sortable>
                <template scope="scope">{{scope.row.enabled | dict('ENABLED', $store.state.dict.list)}}</template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import axios from '~plugins/axios';

    export default {
        data() {
            return {
                tableData: [],
                channels: [],
                formInline: {
                    channel: '-1'
                }
            };
        },
        methods: {
            // 支付账户列表
            queryList(channel) {
                axios.get(`/api/pay/account/list/${typeof channel === 'undefined' ? '-1' : channel}/${this.$route.query.code}`).then(res => {
                    this.tableData = res.data;
                });
            },
            // 支付通道select
            handleChannels() {
                axios.get(`/api/pay/channels/list`).then(res => {
                    this.channels = res.data;
                });
            },
            // 条件查询
            query() {
                this.queryList(this.formInline.channel);
            },
            queryChannel() {
                axios.get(`/api/pay/channels/list`).then(res => {
                    this.channels = res.data;
                });
            },
            handleChannel: function (code) {
                let name = '';
                this.channels.some((obj) => {
                    if (code === obj['code']) {
                        name = obj['name'].concat('【', this.$options.filters.dict(obj['inOut'], 'IN_OUT_TYPE', this.$store.state.dict.list), '】');
                    }
                });
                return name;
            }
        },
        mounted() {
            this.queryList();
            this.handleChannels();
            this.queryChannel();
        }
    };
</script>